/**
 *  transition: property duration timing-function delay ----->动画属性transition(平滑过渡的动画)
 *  property：执行过渡的属性
 *  duration：执行过渡的持续时间
 *  timing-function：执行过渡的速率模式
 *  delay：延时多久执行
 *  PS: 应用场景:获得焦点，点击鼠标等动作导致CSS属性值的变化是瞬间完成的，感觉有点生硬。用transition可以指定在某时间段内将属性值平滑过渡，增强用户体验
 *
 * transform变形属性:  absolute和transform平级
 */
.fade-transform-leave-active, .fade-transform-enter-active {
    transition: all 0.5s
}
.fade-transform-enter {
    opacity: 0
    transform: translateX(-30px)
}
.fade-transform-leave-to {
    opacity: 0
    transform: translateX(30px)
}
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s
}
.fade-enter, .fade-leave-to {
    opacity: 0
}
